<template>
  <div class="binner-right">
    <div class="binner-links">
      <router-link class="links-item" :to="link.href" v-for="(link, index) in links" :key="index">{{ link.text }}</router-link>
    </div>
    <div class="binner-first">
      <div class="binner-play"><carousel :imgsrc="playImgs"></carousel></div>
      <div class="binner-live"><img :src="liveImg" alt="" /></div>
      <div class="binner-user">
        <div class="user-content">
          <div class="user-img"><img src="//s0.meituan.net/bs/fe-web-meituan/e350c4a/img/avatar.jpg" alt="" /></div>
          <div class="user-name">Hi！你好</div>
          <router-link class="user-register" to="">注册</router-link>
          <router-link class="user-login" to="">立即登录</router-link>
        </div>
      </div>
    </div>
    <div class="binner-second">
      <div class="binner-hotel-up">
        <div class="binner-hotel"><img :src="hotelImg" alt="" /></div>
        <div class="binner-up"><img :src="upImg" alt="" /></div>
      </div>
      <div class="binner-merchant"><img :src="merchantImg" alt="" /></div>
      <div class="binner-app">
        <div class="app-img"><img src="https://s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png" alt="" /></div>
        <div class="app-title">美团APP手机版</div>
        <div class="app-text">
          <span class="one">一元起</span>
          <span class="eat">吃喝玩乐</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from '@/components/index/binner/carousel.vue';

export default {
  data() {
    return {
      playImgs: [
        { key: 0, path: 'http://p0.meituan.net/codeman/daa73310c9e57454dc97f0146640fd9f69772.jpg', show: false },
        { key: 1, path: 'http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg', show: false },
        { key: 2, path: 'http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg', show: false },
        { key: 3, path: 'http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg', show: false },
        { key: 4, path: 'https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png', show: false }
      ],
      liveImg: 'http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg',
      hotelImg: 'http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png',
      upImg: 'http://p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg',
      merchantImg: 'http://p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg',
      appImg: 'https://s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png',
      links: [
        {
          text: '美团外卖',
          href: '/take'
        },
        {
          text: '猫眼电影',
          href: ''
        },
        {
          text: '美团酒店',
          href: ''
        },
        {
          text: '民宿/公寓',
          href: ''
        },
        {
          text: '商家入住',
          href: ''
        },
        {
          text: '美团公益',
          href: ''
        }
      ]
    };
  },
  components: {
    carousel
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.binner-right
  position relative
  margin 10px 0 0 10px
  .binner-links
    position absolute
    left 20px
    top -45px
    .links-item
      display inline-block
      color #222222
      padding 0 20px
      font-size 16px
      font-weight 700
      &:hover
        color #FE8C00
  .binner-first
    display flex
    width 100%
    height 240px
    .binner-play
      flex 0 0 550px
      height 100%
    .binner-live
      flex 0 0 150px
      height 100%
      margin 0 10px
      img
        width 100%
        height 100%
        cursor pointer
      &:hover
        box-shadow 0 0 5px 5px rgba(7, 17, 27, 0.1)
    .binner-user
      flex 0 0 230px
      height 100%
      box-sizing border-box
      border 1px solid #E5E5E5
      text-align center
      background #FFFFFF
      .user-content
        padding-top 30px
        .user-img
          margin-bottom 4px
          img
            width 47px
            height 47px
            border-radius 50%
            border 4px solid #E5E5E5
        .user-name
          font-size 16px
          text-align center
          color #222222
          font-weight 500
          overflow hidden
          white-space nowrap
        .user-register, .user-login
          display block
          font-size 16px
          margin 10px 54px 15px 54px
          line-height 38px
          color #222222
          border 1px solid #E5E5E5
          border-radius 40px
          &:hover
            background #F8F8F8
  .binner-second
    display flex
    width 100%
    height 11.5rem
    .binner-hotel-up
      display flex
      flex 0 0 550px
      width 34.375rem
      height 100%
      .binner-hotel, .binner-up
        flex 0 0 16.875rem
        width 16.875rem
        margin 10px 10px 0 0
        cursor pointer
        font-size 0
        img
          width 100%
          height 100%
          &:hover
            box-shadow 0 0 5px 5px rgba(7, 17, 27, 0.1)
    .binner-merchant
      flex 0 0 150px
      width 9.375rem
      height 10.875rem
      margin 0.625rem 0.625rem 0 0.625rem
      cursor pointer
      font-size 0
      img
        width 100%
        height 100%
        &:hover
          box-shadow 0 0 5px 5px rgba(7, 17, 27, 0.1)
    .binner-app
      flex 0 0 230px
      width 14.375rem
      margin-top 0.625rem
      height 10.875rem
      box-sizing border-box
      border 1px solid #E5E5E5
      text-align center
      background #FFFFFF
      .app-img
        margin-top 0.625rem
        text-align center
        font-size 0
        height 6.1875rem
        img
          width 5.9375rem
          height 5.9375rem
      .app-title
        font-size 1rem
        font-weight 500
        color #222222
        text-align center
      .app-text
        font-size 0.75rem
        margin-top 0.1875rem
        color #222222
        text-align center
        .one
          color red
          margin-right 0.25rem
</style>
